<template>
    <div class="Classmanagement">
        <!--        面包导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>学院管理</el-breadcrumb-item>
            <el-breadcrumb-item>班级管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!--        卡片-->
        <el-card class="box-card">
            <!--            搜索区域-->
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-select v-model="queryInfo.cname" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in collegeList"
                                :key="item.id"
                                :label="item.cname"
                                :value="item.cname">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-input placeholder="请输入班级代码"  v-model="queryInfo.classname" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="getAllClassList"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <!--            表格区域-->
            <el-table :data="classList" border>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="院系名称" prop="cname"></el-table-column>
                <el-table-column label="班级代码" prop="classname"></el-table-column>
                <el-table-column label="班级人数" prop="number"></el-table-column>
                <el-table-column label="操作"  width="180px">
                    <template slot-scope="scope">
                        <!--                            修改-->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
                        <!--                            删除-->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUser(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--                分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Classmanagement",
        data(){
            return{
                classList: [],
                collegeList: [],
                queryInfo:{
                    classname: '',
                    cname: '',
                    page: 1,
                    size: 10
                },
                total: 0,
            }
        },
        created() {
            this.getAllClassList()
        },
        methods:{
            async getAllClassList(){
                const {data: ref} =await this.$http.get('manage/getClassList',{
                    params: this.queryInfo
                })
                if(ref.code != 200) return this.$message.error('数据获取失败')
                this.classList = ref.data.data
                this.total = ref.data.total
                const {data: res} =await this.$http.get('manage/getAllCollege',{
                    params: {
                        page: 1,
                        size: 100,
                        cname: ''
                    }
                })
                if(res.code != 200) return this.$message.error('数据获取失败')
                this.collegeList = res.data.data
            },
            //监听pagesize的改变
            handleSizeChange(newSize){
                this.queryInfo.size = newSize
                this.getAllClassList()
            },
            //页码值改变
            handleCurrentChange(newPage){
                this.queryInfo.page = newPage
                this.getAllClassList()
            },
        }
    }
</script>

<style scoped>

</style>